import Echarts from "@/components/echarts"
import { useState, useRef, useEffect } from "react"
import mapOption from "../config/Map/mapOption"
import mapOption2 from "../config/Map/mapOption2"
import "./index.less"
type EChartsOption = echarts.EChartsOption;
import { provinceType } from "@/assets/map/jiangxi"
import axios from "axios"
import * as echarts from 'echarts';

import { useDispatch } from "react-redux"
import { handlerBread } from "@/redux/actions"
import { FundViewOutlined, } from '@ant-design/icons';
const BreadData: breadType[] = [{
    icon: <FundViewOutlined />,
    label: "Echarts",
    herf: ''
}, {
    icon: undefined,
    label: "Map 地图",
    herf: ''
}]


export default function Map() {
    const dispatch = useDispatch()
    //mapOption2
    let chartInstance: echarts.ECharts;
    function getEchartInstance2(echartsInstance: echarts.ECharts) {
        chartInstance = echartsInstance
        mapOption2(echartsInstance).then((res) => {
            echartsInstance.setOption(res)
        })
        let proData: any = {};

        (echartsInstance as any).on("click", async (param: any) => {
            let { data } = param
            if (proData) {
                const { data: res } = await axios.get((data as provinceType).url)
                proData[(data as provinceType).PY_name] = res
                echarts.registerMap((data as provinceType).PY_name, res)
            }
            let option: EChartsOption = {
                title: {
                    text: (data as provinceType).name + ' Chart ',
                },
                geo: [{
                    map: (data as provinceType).PY_name,
                }],
                series: [{
                    map: (data as provinceType).PY_name,
                }]
            }
            echartsInstance.setOption(option)

        })
    }
    function goMap() {
        let option: EChartsOption = {
            title: {
                text: '江西 Chart ',
            },
            geo: [{
                map: "jiangxi",
            }],
            series: [{
                map: "jiangxi",
            }]
        }
        chartInstance.setOption(option)
    }

    useEffect(() => {
        dispatch(handlerBread(BreadData))
    }, [])

    return (
        <div className="Ecahrts_views flex">
            <Echarts myOption={mapOption} width={"33%"} height={"400px"} className={"MapChart"} />
            <Echarts width={"33%"} height={"400px"} className={"MapChart2"} refResult={getEchartInstance2} dbClick={goMap} />
        </div>
    )
}